@import "../var";

.label {
  display: block;
  width: 100%;
  padding: @label-padding;
  cursor: pointer;
}

.field {
  display: block;
  width: 100%;
  margin: @field-margin;
  padding: @field-padding;
  border: @field-border;
  border-radius: @field-border-radius;
  outline: 0;
  background-color: @field-background-color;
  font-family: inherit;
  font-size: @field-font-size-medium;
  font-weight: @field-font-weight;
  resize: vertical;
  appearance: none;

  &:focus {
    border-color: @field-focus-border-color;
    box-shadow: @field-focus-box-shadow;
  }
}

.label__field {
  .field();
  margin: @label-field-margin;
}

.disabled {
  color: @field-disabled-color;
  cursor: not-allowed;
}

.field--disabled {
  .disabled();
  border-color: @field-disabled-border-color;
  background-color: @field-disabled-background-color;
}
